<template>
  <div class="system-dept-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="toolbar">
        <el-button @click="saveDiagram">保存流程图</el-button>
        <el-button @click="loadDiagram">导入流程图</el-button>
      </div>
      <div class="flow-work">
        <div class="container">
          <!-- 创建一个canvas画布 npmn-js是通过canvas实现绘图的 -->
          <div ref="canvas" class="bpmn-canvas" />
          <!-- 工具栏显示的地方 -->
          <div id="js-properties-panel" class="bpmn-js-properties-panel" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { onMounted, ref, markRaw } from 'vue';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';

// 引入样式
import 'bpmn-js/dist/assets/diagram-js.css'; // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'; // 右侧属性面板样式

export default {
  name: 'ProcessDesign',
  setup() {
    const canvas = ref(null);
    let bpmnModeler = null;

    onMounted(() => {
      bpmnModeler = markRaw(new BpmnModeler({
        container: canvas.value,
        // 添加控制板
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        // 右侧属性面板
        additionalModules: [
          propertiesPanelModule
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor
        }
      }));

      bpmnModeler.createDiagram().then(() => {
        bpmnModeler.get('canvas').zoom('fit-viewport');
      });
    });

    const saveDiagram = async () => {
      try {
        const { xml } = await bpmnModeler.saveXML({ format: true });
        console.log('保存的XML:', xml);
        // 这里可以将xml保存到服务器或本地
      } catch (err) {
        console.error('保存流程图失败:', err);
      }
    };

    const loadDiagram = async () => {
      const xml = `<?xml version="1.0" encoding="UTF-8"?>
    <bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
      <bpmn:process id="Process_2" isExecutable="false">
        <bpmn:startEvent id="StartEvent_2" />
      </bpmn:process>
      <bpmndi:BPMNDiagram id="BPMNDiagram_1">
        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_2">
          <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
            <dc:Bounds x="173" y="102" width="36" height="36" />
          </bpmndi:BPMNShape>
        </bpmndi:BPMNPlane>
      </bpmndi:BPMNDiagram>
    </bpmn:definitions>`;
      try {
        debugger
        await bpmnModeler.importXML(xml);

        bpmnModeler.get('canvas').zoom('fit-viewport');
      } catch (err) {
        console.error('导入流程图失败:', err);
      }
    };

    return {
      canvas,
      saveDiagram,
      loadDiagram
    };
  }
};
</script>

<style scoped>
.container {
  height: calc(90vh - 160px);
  margin-top: 0;
  position: relative;
}

.bpmn-canvas {
  height: calc(100vh - 200px);
  border: 1px solid rgb(121, 121, 121);
}

.bpp-properties-panel [type=text] {
  box-sizing: border-box;
}

.bpmn-js-properties-panel {
  width: 400px;
  position: absolute;
  top: 1px;
  right: 1px;
  height: calc(100vh - 200px);
  overflow: auto;
}

.toolbar {
  margin-top: 10px;
  text-align: right;
}

/* 右下角logo */
.bjs-powered-by {
  display: none;
}
</style>
